<script setup lang="ts">

import {useRouter} from "vue-router";

const user = {
  id: 1,
  username: '用户xuqi',
  userAccount: 'xuqi',
  userRole: '1',
  avatarUrl: 'https://ui-avatars.com/api/?name=xuqi&rounded=true',
  gender: 1,
  phone: '',
  email: '',
  userStatus: '0',
  tags: ["java", "c++"],
  createTime: '2025-10-09 06:31:04'
}

const router = useRouter();

const toEdit = (key: string, name: string, value: string) => {
  router.push({
        path:
            '/user/edit',
        query:
            {
              editKey: key,
              editName: name,
              curValue: value
            }
      }
  )


};

</script>

<template>
  <div id="setting">
    <van-cell title="头像">
      <img :src="user.avatarUrl" alt="头像"/>
    </van-cell>
    <van-cell title="昵称" is-link to="/user/edit" :value="user.username"
              @click="toEdit('username','昵称',user.username)"/>
    <van-cell title="账号" :value="user.userAccount"/>
    <van-cell title="性别" is-link to="/user/edit" @click="toEdit('gender','性别',user.gender===1? '男':'女')">
      <div v-if="user.gender === 1">
        <van-tag color="#746ccf"> 男</van-tag>
      </div>
      <div v-else>
        <van-tag color="#cf746c"> 女</van-tag>
      </div>
    </van-cell>
    <van-cell title="标签" is-link to="/user/edit">
      <van-row gutter="16" style="padding: 16px">
        <van-col v-for="tag in user.tags"
                 :key="tag"
                 style="text-align: right;">
          <van-tag
              size="medium"
              type="primary"
              class="tag-item">
            {{ tag }}
          </van-tag>
        </van-col>
      </van-row>
    </van-cell>
    <van-cell title="电话" is-link to="/user/edit" :value="user.phone"
              @click="toEdit('phone','电话',user.phone)"/>
    <van-cell title="邮箱" is-link to="/user/edit" :value="user.email"
              @click="toEdit('email','邮箱',user.email)"/>
    <van-cell title="注册时间" :value="user.createTime"/>
  </div>
</template>

<style scoped>

</style>